テキストボックスに用語解説を表示
今週は、ちょっと上級者向けのJavaScriptテクニックを一つ紹介します。紹介するのは「文字の上にカーソルを重ねると、テキストボックスに用語解説が表示される」というもの。よく意味がわからない人は、初めにサンプルページを参照してみてください。今回紹介するテクニックの意味がわかると思います。

→ テキストボックスの作成
 
まずはじめに、用語解説を表示するためのテキストボックスを作成します。これは「TEXTAREA」タグで、rows属性に行数、cols属性に幅(文字数)を指定すればOKです。また、name属性でテキストボックスに名前を付けておくのを忘れないようにしてください。ここでは「setsumei」という名前をテキストボックスに付けています。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
ここに文章が入ります。
<BR>
<BR>
<TEXTAREA name="setsumei" rows="5" cols="40"></TEXTAREA>
</BODY>

</HTML>


→ 用語解説を表示するJavaScript
 
続いては、用語解説を表示させるJavaScriptを記述します。今回は用語解説する文字にアンダーラインを引くので、「U」タグを使用します。マウスが文字上に来たときのイベントとなるonMouseOverを使い、(テキストボックスの名前).value=(説明文)と記述すれば用語解説を表示できるようになります。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
このページの文章でアンダーラインが引かれている文字の上にカーソルを移動させると、その用語解説が表示されます。たとえば、皆さんは
<U onMouseOver="setsumei.value='山や水辺に住む化け物のようなもの。怪物、妖怪変化など'">
魑魅魍魎
</U>
の意味を知っていますか。わからない人は、カーソルを文字上に移動させてみましょう。用語解説がテキストボックスに表示されるはずです。そのほか
<U onMouseOver="setsumei.value='根拠のない、いいかげんな噂。根も葉もないデマなど'">
流言飛語
</U>
なんて四字熟語もあります。
<BR>
<BR>
<TEXTAREA name="setsumei" rows="5" cols="40"></TEXTAREA>
</BODY>

</HTML>


→ 用語解説を消去するJavaScript
 
このままの状態では、一度表示させた用語解説がずっと表示されたままです。onMouseOutイベントを追加し、カーソルが文字上から移動した場合にテキストボックスを空白にするJavaScriptも記述しましょう。これは先ほどと同様に、「onMouseOut="(テキストボックスの名前).value=''"」と記述します。今度はvalueの値を(説明文)ではなく、「''」(文字なし)にするのがポイントです。これで用語解説表示のJavaScriptは完成しました。『面白いな』と思った人は、ぜひ試してみてください。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
このページの文章でアンダーラインが引かれている文字の上にカーソルを移動させると、その用語解説が表示されます。たとえば、皆さんは
<U onMouseOver="setsumei.value='山や水辺に住む化け物のようなもの。怪物、妖怪変化など。'" onMouseOut="setsumei.value=''">
魑魅魍魎
</U>
の意味を知っていますか。わからない人は、カーソルを文字上に移動させてみましょう。用語解説がテキストボックスに表示されるはずです。そのほか
<U onMouseOver="setsumei.value='根拠のない、いいかげんな噂。根も葉もないデマなど。'" onMouseOut="setsumei.value=''">
流言飛語
</U>
なんて四字熟語もあります。
<BR>
<BR>
<TEXTAREA name="setsumei" rows="5" cols="40"></TEXTAREA>
</BODY>

</HTML>


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze